<template>
  <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" :inline="true">
      <el-form-item label="编号" prop="number">
        <el-input v-model="form.numberNum" disabled style="width: 280px;" />
      </el-form-item>
      <el-form-item label="公司名称" prop="company">
        <el-input v-model="form.company" disabled style="width: 280px;" />
      </el-form-item>
      <el-form-item label="报销人姓名" prop="applicantName">
        <el-input v-model="form.applicantName" style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="报销人所属部门" prop="applicantDept">
        <el-input v-model="form.applicantDept" style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="报销人卡号" prop="applicantCardNumber">
        <el-input
          v-model="form.applicantCardNumber"
          :disabled="isdisabled"
          placeholder="请输入"
          style="width: 280px;"
        />
      </el-form-item>
      <el-form-item label="报销人开户银行名称" prop="applicantRankName" >
        <el-input v-model="form.applicantRankName" style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="收款方单位名称" prop="payeeUnitName" >
        <el-input v-model="form.payeeUnitName"  style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="收款方账号" prop="payeeAccount">
        <el-input v-model="form.payeeAccount" style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="收款方开户银行名称" prop="payeeRankName" >
        <el-input v-model="form.payeeRankName" style="width: 280px;" :disabled="isdisabled" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="费用类型" prop="applicantType">
        <el-select
          style="width: 280px;"
          v-model="form.applicantType"
          @change="costTypeChange"
          placeholder="请选择费用类型"
          :disabled="isdisabled"
        >
          <el-option
            v-for="dict in dict.type.applicant_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName" v-if="form.applicantType=='project_cost'">
        <el-select
          style="width: 280px;"
          v-model="form.projectName"
          :disabled="title!='添加费用报销申请'"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in projectNameList"
            :key="item.projectName"
            :label="item.projectName"
            :value="item.projectName"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="isDisabled" /> -->
      </el-form-item>
      <br />

      <el-form-item label="报销清单">
        <el-button
          type="primary"
          :disabled="isdisabled"
          icon="el-icon-plus"
          size="mini"
          @click="applayaddRow(applyList)"
        >添加清单</el-button>
      </el-form-item>
      <el-table
        ref="table"
        :data="applyList"
        style="width: 100%;margin-bottom:0.125rem"
        border
      >
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
        <el-table-column prop="itemName" label="报销内容" align="center" width="800">
          <template slot-scope="scope">
            <el-input v-model="scope.row.itemName" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="smallLetter" label="报销金额(元)小写" align="center" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.smallLetter"
              @input="scope.row.smallLetter=scope.row.smallLetter.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              :disabled="isdisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="capitalization" label="报销金额大写" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.capitalization" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="attachmentNumbers" label="附件张数" align="center" width="180">
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.attachmentNumbers"
              :disabled="isdisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="applaydeleteRow(scope.$index, applyList)"
              :disabled="isdisabled"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--            <el-form-item label="报销内容">-->
      <!--              <editor v-model="form.applicantContent" :min-height="192" :disabled='isdisabled'/>-->
      <!--            </el-form-item>-->
      <div>
        <el-form-item label="收款合计(元)" prop="payeeTotal" label-width="130px">
          <el-input v-model="form.payeeTotal" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收款总额大写" prop="payeeCapitalization" >
          <el-input v-model="form.payeeCapitalization" disabled placeholder="请输入" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="上传附件" prop="attachment">
          <fileUpload v-model="form.attachment" :isDisabled="isdisabled" :limit="5" />
          <!--                <el-input :disabled='isdisabled' v-model="form.attachment" type="textarea" placeholder="请输入内容" />-->
        </el-form-item>
      </div>
      <div>
        <el-form-item class="remarks" label="备注" prop="remarks" style="width: 100%">
          <el-input
            style="width: 100%"
            :disabled="isdisabled"
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </div>
    </el-form>
      <div
        v-show="parentTaskId===null&&confirmVisible"
        class="dialog-footer"
        style="text-align:center"
      >
        <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
        <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
      </div>
      <div
        v-show="parentTaskId==null&&!confirmVisible"
        class="dialog-footer"
        style="text-align:right"
      >
        <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      </div>
      <!-- 工作流开始 -->
      <verify ref="verifyRef"
              :deptId="dept.deptId"
              :taskId="taskId"
              @submitCallback="submitCallback" :componentName="componentName"
              :taskVariables="taskVariables"
              :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import { getFinanceSubmit } from "@/api/oa/financeSubmit";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "FinanceSubmitForm",
  components: {
      verify
  },
  dicts: ["applicant_type"],
  props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      confirmVisible:{
          type: Boolean,
          default: true
      }
  },
  data() {
    return {
      componentName: "费用报销申请",
      dept:"",
      isdisabled:true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      title:"",
        projectNameList:[],
      // 表单校验
      rules: {
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        applicantName: [
          { required: true, message: "报销人姓名不能为空", trigger: "blur" }
        ],
        applicantDept: [
          { required: true, message: "报销人所属部门不能为空", trigger: "blur" }
        ],
        applicantCardNumber: [
          { required: true, message: "报销人卡号不能为空", trigger: "blur" }
        ],
        applicantRankName: [
          { required: true, message: "报销人开户银行名称不能为空", trigger: "blur" }
        ],
        applicantType: [
          { required: true, message: "费用类型不能为空", trigger: "change" }
        ],
        payeeUnitName: [
          { required: true, message: "收款方单位名称不能为空", trigger: "blur" }
        ],
        payeeAccount: [
          { required: true, message: "收款方账号不能为空", trigger: "blur" }
        ],
        payeeRankName: [
          { required: true, message: "收款方开户银行名称不能为空", trigger: "blur" }
        ],
        payeeTotal: [
          { required: true, message: "收款合计不能为空", trigger: "blur" }
        ],
        payeeCapitalization: [
          { required: true, message: "收款总额大写不能为空", trigger: "blur" }
        ],
      },
        taskVariables: undefined,
        //消息提醒
        sendMessage: {},
        processKey: 'oa_finance_submit',
        applyList:[],
    };
  },
  watch: {
      businessKey: {
          immediate: true, // 很重要！！！
          handler (newVal) {
              if(newVal) {
                  this.getById()
              }
          }
      }
  },
  mounted() {
    if (this.$store.state.user.roles[0]=="common"||this.$store.state.user.roles[0]=="board"){
      this.dept=this.$store.state.user.dept?this.$store.state.user.dept:"";
    }
  },
  methods: {
    submitCallback(){
        this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getFinanceSubmit(this.businessKey)
      this.form = data;
      if (data.actBusinessStatus.createTime){
            this.form.numberNum="江苏华琛能源发展有限公司";
        }
      this.applyList = JSON.parse(data.applicantContent);
    },
    /** 提交按钮 */
    submitForm() {
        getFinanceSubmit(this.businessKey).then(response => {
            this.taskVariables = {
                entity: response.data,
                userRole: this.$store.state.user.roles[0]
            };
            this.sendMessage = {
          title: "报销申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了报销申请"
        };
        });
        this.$refs.verifyRef.visible = true
        this.$refs.verifyRef.reset()
    },
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },
    applayaddRow(tableData1) {
      tableData1.push({
        specificationModel: "",
        smallLetter: "",
        attachmentNumbers: "",
        capitalization: "",
        xh: this.xh1,
        infoId: this.infoId
      });
    },
  }
};
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
    #selectForm >>> .el-form-item__label {
        font-size: 12px;
    }
    ::v-deep .bjsm .el-form-item__content{
        width: calc(100% - 130px) !important;
    }
</style>
